<template>
  <!-- <div class="task-details">
      <h2>{{ task.title }}</h2>
      <p><strong>状态：</strong>{{ task.status }}</p>
      <p><strong>截止时间：</strong>{{ task.deadline }}</p>
      <p><strong>任务详情：</strong>{{ task.description }}</p>
    </div> -->

  <div class="task-show">
    <h1>{{ article.articleTitle }}</h1>
    <span class="task-meta">
      <strong>发布时间：{{ article.createTime }}</strong>
    </span>
    <span class="task-meta">
      <strong>发布者：{{ article.name }}</strong>
    </span>
    <!-- <p>{{ task.description }}</p> -->
    <div class="task-content" v-html="article.content"></div>

    <div class="talks">
      <div class="talkitem" v-for="(item,index) in article.commentList">
        <div class="talk-top">
          <!-- 头像 -->
          <div class="pic">
            <img :src="item.avatar" alt="">
          </div>
          <div class="nickname">
            <span>{{ item.name }}</span>
          </div>
          <div class="time">
            <span>{{ item.commentTime }}</span>
          </div>
          <div class="btn" @click="ackTask(item.uid)">选用</div>
        </div>

        <div class="talk-content">
          <p>{{ item.content }}</p>
        </div>

      </div>
    </div>
  </div>
</template>
  
<script setup>
import { ref, onMounted } from 'vue'
import api from '../../api/api.js';
// 接收路由传递的参数 id
const props = defineProps({
  id: {
    type: [String, Number],
    required: true
  }
})
// 定义数据(文章内容)
const article = ref({
  aid: 0,
  articleTitle: "标题",
  views: 0,
  alikes: 0,
  content: "",
  name: "作者用户名",
  createTime: "2022-01-01 12:00:00",
  like: true,
  commentList: [
    {
      uid: 0,
      avatar: "",
      name: "用户名",
      cid: 0,
      content: "评论内容",
      like: true,
      commentLikes: 0,
      commentTime: "2022-01-01 12:00:00",
    }
  ]
})

//选用任务执行者
const ackTask = async (uid) => {
  try {
    await api.ackMissionApi({uid:uid,aid:article.value.aid})

    alert("选用成功");
  } catch (error) {
    console.error("选用任务执行者失败", error);
  }
}

//获取文章内容
const getArticleById = async (id) => {
  try {
    const res = await api.getArticleByIdApi({ aid: id });
    article.value = res.data;
  } catch (error) {
    console.error("获取文章内容失败", error);
  }
}


// 根据路由传递的 id 获取任务详情
// 根据路由传递的id 获取文章
onMounted(async () => {
  try {
    const articleId = parseInt(props.id)  // 获取路由参数 id

    await getArticleById(articleId);// 获取文章内容


  } catch (err) {
    console.error("加载资源时出错:", err);
  }
})
</script>
  
<style  lang="less">


.task-show {
  width: 65%;
  margin: 0 auto;
  background-color: #f9f9f9;
  /* 示例背景色 */
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px 0px 0px 0px;

}

h1 {
  font-size: 30px;
  // text-align: center; /* 标题居中 */
  padding: 7px 33px 11px 22px;
}

/* 日期和根目录部分 */
.task-meta {
  font-size: 14px;
  color: #666;
  display: block;
  /* 强制为块级元素，以便控制间距 */
  margin-left: 22px;
  /* 顶部间距 */
  // margin-top: 10px; /* 顶部间距 */
  margin-bottom: 20px;
  /* 与内容之间的间距 */
}

.task-meta strong {
  margin-right: 12px;
  /* 日期和根目录之间的间距 */
}


.task-content {
  font-size: 18px;
  /* 设置p标签的字体大小为18px */
  padding: 10px 18px;
  // text-indent: 2em; /* 首行缩进2个字符 */
  overflow-wrap: break-word;
}

.task-content img {
  max-width: 100%;
}

.talks{
  width: 100%;
  // background-color: antiquewhite;
  padding: 0 18px;
  .talkitem{
    background-color: rgb(218, 218, 218);
    margin-bottom: 5px;
    border-radius: 10px;
    .talk-top{
      display: flex;
      height: 40px;
      line-height: 40px;
      margin: 0;
      padding:0;
      justify-content: flex-start;
      align-items: center;
      .pic{
        width: 40px;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
          
        }
      }
      .nickname{
        font-size: 16px;
        color: #070733;
      }
      .time{
        font-size: 14px;
        color: #565656;
        margin-left: 10px;
      }
      .btn{
        padding: 0 10px;
        background-color: #ffffff;
        margin: 0 20px;
        height: 30px;
        display: flex;
        align-items: center;
        border-radius: 15px;
        &:hover{
          background-color: #62aaf7;
          cursor: pointer;
        }
      }
    }
    .talk-content{
      padding: 5px 40px;
      width: 60%;
    }

  }

}
</style>
  